---
import Icon from "astro-icon";

const features = [
  {
    icon: "icon-park-outline:easy",
    title: "Easy to use",
    description:
      "Just choose the server where you want to play, even open pes6 for you!",
  },
  {
    icon: "ic:baseline-trending-up",
    title: "Scalability",
    description:
      "The program can add more servers and more options, with your help we can manage to improve the service.",
  },
];
---

<section
  id="features"
  class="pt-20 p-4 sm:px-10 flex items-center justify-center"
>
  <div class="pt-8 pb-20 md:pb-6 max-w-screen-xl">
    <h2 class="text-2xl md:text-5xl font-extrabold text-secondary">
      Features of our service
    </h2>
    <p class="text-yellow-200 text-sm md:text-lg py-2">
      PSM offers features for its users, in its first version, we are in
      continuous improvement so any improvement is welcome 😉✨
    </p>
    <div
      class="flex flex-col md:flex-row items-center justify-center gap-8 py-4"
    >
      {
        features.map((feature) => (
          <article class="flex-1 w-2/3 mx-auto rounded-md grid grid-cols-1 grid-rows-2 md:grid-rows-1 md:grid-cols-[20%_80%] gap-5 md:min-h-full max-h-[15rem]">
            <header class="w-full flex flex-col md:flex-row items-center justify-end  flex-1">
              <div class="p-2 box-border bg-secondary rounded-full">
                <Icon class="w-8 text-slate-900" name={feature.icon} />
              </div>
            </header>
            <div class="md:w-[90%] text-gray-200">
              <h2 class="text-xl font-bold text-center md:text-start">
                {feature.title}
              </h2>
              <p class="text-center md:text-start">{feature.description}</p>
            </div>
          </article>
        ))
      }
    </div>
  </div>
</section>
